<template>
  <view class="settings-container">
    <!-- 账户设置 -->
    <view class="settings-section">
      <view class="section-title">账户设置</view>
      <view class="settings-list">
        <view class="setting-item" @click="changePassword">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">修改密码</text>
          </view>
          <text class="arrow">></text>
        </view>
        
        <view class="setting-item" @click="bindPhone">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">绑定手机</text>
          </view>
          <view class="item-right">
            <text class="item-value">{{userInfo.phone || '未绑定'}}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="setting-item" @click="bindEmail">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">绑定邮箱</text>
          </view>
          <view class="item-right">
            <text class="item-value">{{userInfo.email || '未绑定'}}</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 消息设置 -->
    <view class="settings-section">
      <view class="section-title">消息设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">订单消息</text>
          </view>
          <switch :checked="settings.orderNotification" @change="toggleSetting('orderNotification', $event)" />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">活动推送</text>
          </view>
          <switch :checked="settings.activityNotification" @change="toggleSetting('activityNotification', $event)" />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">优惠券提醒</text>
          </view>
          <switch :checked="settings.couponNotification" @change="toggleSetting('couponNotification', $event)" />
        </view>
      </view>
    </view>
    
    <!-- 隐私设置 -->
    <view class="settings-section">
      <view class="section-title">隐私设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">显示在线状态</text>
          </view>
          <switch :checked="settings.showOnlineStatus" @change="toggleSetting('showOnlineStatus', $event)" />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">允许好友查看</text>
          </view>
          <switch :checked="settings.allowFriendsView" @change="toggleSetting('allowFriendsView', $event)" />
        </view>
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="settings-section">
      <view class="section-title">其他设置</view>
      <view class="settings-list">
        <view class="setting-item" @click="clearCache">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">清除缓存</text>
          </view>
          <view class="item-right">
            <text class="item-value">{{cacheSize}}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="setting-item" @click="checkUpdate">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">检查更新</text>
          </view>
          <view class="item-right">
            <text class="item-value">v1.0.0</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <view class="setting-item" @click="feedback">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">意见反馈</text>
          </view>
          <text class="arrow">></text>
        </view>
        
        <view class="setting-item" @click="about">
          <view class="item-left">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" class="item-icon" />
            <text class="item-label">关于我们</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      cacheSize: '12.5MB',
      settings: {
        orderNotification: true,
        activityNotification: true,
        couponNotification: false,
        showOnlineStatus: true,
        allowFriendsView: true
      }
    }
  },
  
  onLoad() {
    this.loadUserInfo()
    this.loadSettings()
  },
  
  methods: {
    loadUserInfo() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
    },
    
    loadSettings() {
      const savedSettings = uni.getStorageSync('appSettings')
      if (savedSettings) {
        this.settings = { ...this.settings, ...savedSettings }
      }
    },
    
    toggleSetting(key, event) {
      this.settings[key] = event.detail.value
      uni.setStorageSync('appSettings', this.settings)
      
      uni.showToast({
        title: '设置已保存',
        icon: 'success',
        duration: 1000
      })
    },
    
    changePassword() {
      uni.navigateTo({
        url: '/pages/forget-password/index'
      })
    },
    
    bindPhone() {
      uni.showToast({
        title: '绑定手机功能开发中',
        icon: 'none'
      })
    },
    
    bindEmail() {
      uni.showToast({
        title: '绑定邮箱功能开发中',
        icon: 'none'
      })
    },
    
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '清除中...' })
            
            setTimeout(() => {
              uni.hideLoading()
              this.cacheSize = '0KB'
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              })
            }, 1500)
          }
        }
      })
    },
    
    checkUpdate() {
      uni.showLoading({ title: '检查中...' })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '检查更新',
          content: '当前已是最新版本',
          showCancel: false
        })
      }, 1500)
    },
    
    feedback() {
      uni.navigateTo({
        url: '/pages/feedback/index'
      })
    },
    
    about() {
      uni.navigateTo({
        url: '/pages/about/index'
      })
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            uni.showToast({
              title: '退出成功',
              icon: 'success'
            })
            
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/index'
              })
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.settings-section {
  margin-bottom: 40rpx;
  
  .section-title {
    padding: 30rpx 40rpx 20rpx;
    font-size: 28rpx;
    color: #999999;
    background-color: #f5f5f5;
  }
  
  .settings-list {
    background-color: #ffffff;
    
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-left {
        display: flex;
        align-items: center;
        flex: 1;
        
        .item-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        
        .item-label {
          font-size: 32rpx;
          color: #333333;
        }
      }
      
      .item-right {
        display: flex;
        align-items: center;
        
        .item-value {
          font-size: 28rpx;
          color: #999999;
          margin-right: 10rpx;
        }
        
        .arrow {
          font-size: 28rpx;
          color: #cccccc;
        }
      }
      
      .arrow {
        font-size: 28rpx;
        color: #cccccc;
      }
    }
  }
}

.logout-section {
  margin-top: 60rpx;
  padding: 0 40rpx;
  
  .logout-btn {
    width: 100%;
    height: 88rpx;
    background-color: #ff4757;
    color: #ffffff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style> 